<template>
  <div class="work-experience-container">
    <TitleB
      :title="workInfo.moduleTitle"
      iconName="el-icon-s-cooperation"
      :backgroundColor="myThemeColor"
      @btnClick="onBtnClick"
    ></TitleB>
    <Work
      v-for="work in workInfo.workList"
      :key="work.id"
      :workExperience="work"
      @workInfoUpdate="onWorkInfoUpdate(work.id, $event)"
    ></Work>
  </div>
</template>

<script>
import TitleB from '@/components/base/TitleB.vue'
import Work from '@/components//Modules/Work.vue'
import { nanoid } from 'nanoid'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      id: '',
      workInfo: {
        moduleTitle: '',
        workList: [],
      },
    }
  },
  props: {
    workProps: {
      type: Object,
      default: function () {
        return {
          moduleTitle: '工作经验',
          workList: [
            {
              id: nanoid(),
              // 工作时间段
              time: '2016-2020',
              // 工作公司
              jobCompany: '杭州数跑科技',
              // 工作职位
              jobPosition: 'Java开发',
              // 工作描述
              jobDescList: [
                {
                  id: '1',
                  desc: '负责相关产品的需求以及前端程序的实现，提供合理的前端架构。改进和优化开发工具、开发流程、和开发框架',
                },
                {
                  id: '2',
                  desc: 'Web前端功能设计、开发和实现，与后台工程师协作，完成数据交互、动态展现',
                },
                {
                  id: '3',
                  desc: '从视觉和易用性角度，为网站设计提供改进建议，为网站/客户端的页面提供持续优化方案',
                },
              ],
            },
          ],
        }
      },
    },
    moduleId: {
      type: String,
      default: nanoid(),
    },
  },
  computed: {
    ...mapGetters(['myThemeColor']),
  },
  created() {
    this.workInfo = { ...this.workProps }
    this.id = this.moduleId
  },
  methods: {
    onBtnClick(tag) {
      switch (tag) {
        case 'add':
          this.addWorkExper()
          break
        case 'delete':
          this.deleteWorkExper()
          break
        case 'remove':
          this.removeModule()
          break
      }
    },
    addWorkExper() {
      const workExper = {
        id: nanoid(),
        time: '2016-2020',
        // 工作公司
        jobCompany: '公司名称',
        // 工作职位
        jobPosition: '职位',
        // 工作描述
        jobDescList: [
          {
            id: nanoid(),
            desc: '自定义内容',
          },
        ],
      }
      this.workInfo.workList.push(workExper)
      this.updateStore()
    },
    deleteWorkExper() {
      if (this.workInfo.workList.length <= 1) {
        this.$message.warning('至少需要一条数据')
      } else {
        this.workInfo.workList.pop()
        this.updateStore()
      }
    },
    removeModule() {
      this.$store.commit('removeModule', this.id)
    },
    onWorkInfoUpdate(workId, newWorkInfo) {
      this.workInfo.workList.some((item) => {
        if (item.id === workId) {
          Object.assign(item, newWorkInfo)
          return
        }
      })
      this.updateStore()
    },
    updateStore() {
      const newData = { props: this.workInfo, id: this.id }
      this.$store.commit('setModule', newData)
    },
  },
  components: {
    TitleB,
    Work,
  },
}
</script>

<style lang="less" scoped>
.work-experience-container {
  width: 100%;
  padding: 0 15px;
  margin-bottom: 5px;
}
</style>
